import React, {useState} from 'react'
import {
    TouchableOpacity,
    StyleSheet,
    ScrollView,
    View,
    Text,
    TextInput,
} from 'react-native'
import {useNavigation} from '@react-navigation/native'
import History from './History'
import HotList from './HotList'
import SearchList from './SearchList'
import Ionicons from "react-native-vector-icons/Ionicons"
import theme from '../../config/theme'
import ViewUtil from "../../utils/ViewUtil";

const hotData = [
    '#活着',
    '恶之花',
    '虽然是精神病但没关系',
    '便利店新星',
    '暑假',
    'The King：永远的君主',
    '优雅的朋友们',
    '金秀贤',
    '带轮子的家',
    '我们，爱过吗',
    '李食堂',
    '三时三餐'
]

function Search() {
    const [inputText, setInputText] = useState('')
    const [show, setShow] = useState(false)
    const nav = useNavigation()

    function searchResult() {
        setShow(true)
    }

    function cancel() {
        if (show) {
            setShow(false)
        } else {
            nav.goBack()
        }
    }

    let backButton = ViewUtil.getLeftBackButton(() => nav.goBack())

    function contentView() {
        if (show) {
            return <SearchList/>
        } else {
            return (
                <View>
                    <HotList/>
                    <History/>
                </View>
            )
        }
    }

    return (
        <View style={styles.container}>
            <View style={styles.searchCon}>
                {show ? backButton : null}
                <View style={styles.searchText}>
                    <Ionicons name="search" color="#666" size={20}/>
                    <TextInput
                        value={inputText}
                        onChangeText={text => setInputText(text)}
                        placeholder="搜索看看你喜欢的明星"
                        style={styles.inputText}
                    />
                    {
                        inputText !== '' ? (
                            <TouchableOpacity onPress={() => setInputText('')}>
                                <Ionicons name="close-circle-sharp" color="#666" size={20}/>
                            </TouchableOpacity>
                        ) : null
                    }
                </View>
                <Text style={{fontSize: 16, color: "#fff"}}
                      onPress={() => inputText === '' ? cancel() : searchResult()}>{inputText === '' ? '取消' : '搜索'}</Text>

            </View>
            <ScrollView>
                {contentView()}
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#FFFFFF"
    },
    searchCon: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: 10,
        paddingHorizontal: 10,
        backgroundColor: theme.mainBackgroundColor
    },
    searchText: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        backgroundColor: theme.bodyBackgroundColor,
        borderRadius: 34,
        flex: 1,
        paddingHorizontal: 10,
        marginRight: 10
    },
    inputText: {
        paddingVertical: 0,
        paddingRight: 10,
        flex: 1,
        fontSize: 14,
        color: theme.mainFontColor
    }
});

export default Search
